<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="videoShow1">
					<video class="videoShow" id="myVideo" :autoplay="false" :src="classInfo.videoUrl"></video>
				</view>
				<view class="videoShowitem">
					<view class="time-wrap">
						<image src="../../static/imags/Time_(时间).png"></image>
						<view class="t-time">{{ classInfo.pubTime }}</view>
					</view>
					<view>观看·{{ classInfo.viewCount }}</view>
					<view class="custom-share-view">
						<!-- 自定义分享样式 -->
						<image src="../../static/icon/Share.png" class="share-icon" /> ·{{ classInfo.shareCount }}
						<!-- 隐藏的分享按钮 -->
						<button @tap="handShareCountAdd" open-type="share" class="hidden-share-btn"
							:data-item="shareData" @tap.stop></button>
					</view>
					<!-- <image @click="triggerShare" src="../../static/icon/Share.png"></image> -->
					<view @tap="handleLike" class="like-wrap">
						<image v-if="classInfo.likeFlag == 0" class="date_image" src="../../static/images/collect.png">
						</image>
						<image v-else class="date_image" src="../../static/images/like1.png"></image>
						{{ classInfo.likeCount }}
					</view>
				</view>
				<view class="check_tiem">
					<u-subsection :list="tabList" :current="curNow" @change="sectionChange"
						active-color="#19E820"></u-subsection>
				</view>
				<view class="fotter">
					<view class="jieshao" v-if="curNow == 0">
						<view v-if="classInfo.fileListPic" class="j-img">
							<scroll-view style="height: 100%" :scroll-y="true">
								<view class="img-wrap">
									<image mode="widthFix" v-for="(item, index) in classInfo.fileListPic" :key="index"
										:src="item.fileUrl"></image>
								</view>
								<view v-if="classInfo.flagOpen == 1" @tap="handleBaoming" class="foot-btn">一键报名</view>
							</scroll-view>
						</view>
					</view>
					<view class="pinlun" v-else-if="curNow == 1">
						<view class="pinlun-wrap" v-if="commentList.length > 0">
							<scroll-view style="height: 100%" :scroll-y="true">
								<view class="p-wrap" v-for="(item, index) in commentList" :key="index">
									<view class="p-cover">
										<image @tap="lookMarket(item.briefUserInfo.userId)"
											:src="item.briefUserInfo.avatar" mode=""></image>
									</view>
									<view class="p-right">
										<view class="content-item" @touchstart="handleTouchStart"
											@touchend="handleTouchEnd" @touchcancel="handleTouchEnd"
											@longpress.prevent="handleLongPress(item)">
											<view class="p-name">{{ item.briefUserInfo.nickName }}</view>
											<view class="p-content">{{ item.commentInfo }}</view>
											<view class="p-foot">
												<view style="display: flex" class="">
													<view class="p-data">{{ item.createTime }}</view>
													<view class="p-address">
														{{ item.briefUserInfo.province ? item.briefUserInfo.province : '未知' }}
													</view>
												</view>
												<view @tap="handleReply(item)" class="p-btn">回复</view>
											</view>
										</view>
										<view v-if="item.expanded">
											<view v-for="(item1, index1) in item.children" :key="index1"
												@touchstart="handleTouchStart" @touchend="handleTouchEnd"
												@touchcancel="handleTouchEnd" @longpress.stop="handleLongPress(item1)"
												class="child-content">
												<view class="c-head">
													<view class="c-cover">
														<image @tap="lookMarket(item1.briefUserInfo.userId)"
															class="avatar" :src="item1.briefUserInfo.avatar" />
													</view>
													<view class="c-name">
														{{ item1.briefUserInfo.nickName }}
													</view>
												</view>
												<view class="c-content">
													{{ item1.commentInfo }}
												</view>
												<view class="c-foot">
													{{ item1.createTime + ' ' + item1.briefUserInfo.province }}
												</view>
											</view>
										</view>
										<!-- 展开按钮 -->
										<view v-show="item.children.length > 0" class="expand-btn"
											@tap="handleExpand(item, index)">
											<text>{{ item.expanded ? '收起' : '展开' }}{{ item.children.length }}条回复</text>
											<text class="arrow">{{ item.expanded ? '▲' : '▼' }}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<u-empty v-else mode="list"></u-empty>
						<view class="p-input">
							<u--input @blur="onInputBlur" :focus="inputFocus" v-model="conmment" shape="circle"
								:placeholder="commentName ? '回复@' + commentName : '请输入内容'" clearable></u--input>
							<button @tap="handleSend" type="primary">发送</button>
						</view>
					</view>
					<view class="dianzan" v-else>
						<view class="dianzan-wrap" v-if="likeList.length > 0">
							<scroll-view style="height: 100%" :scroll-y="true">
								<view class="p-wrap" v-for="(item, index) in likeList" :key="index">
									<view class="p-cover">
										<image :src="item.avatar" @tap="lookMarket(item.userId)" mode=""></image>
									</view>
									<view class="p-right">
										<view class="p-name">{{ item.nickName }}</view>
										<view class="p-foot">
											<view style="display: flex" class="">
												<view class="p-data">{{ item.customDate }}</view>
												<view class="p-address">{{ item.province ? item.province : '未知' }}
												</view>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<u-empty v-else mode="list"></u-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import {
		mapState
	} from 'vuex'; // 关键导入
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				keyboardHeight: 0, // 新增键盘高度监听
				hasInputContent: false, // 标记是否有输入
				inputFocus: false, // 控制输入框聚焦
				commentName: '',
				conmment: '',
				conmmentId: '',
				classInfo: {},
				pageTitle: '芬享会详情页',
				showSex: false,
				videoList: [{
					url: 'https://cdn.uviewui.com/uview/resources/video.mp4',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东',
					poster: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
				}],
				tabList: ['介绍', '评论(5)', '点赞(999)'],
				curNow: 0,
				Data: [{
					name: '123456',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					note: '09-12 00:34 浙江'
				}, {
					name: '123456',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					note: '09-12 00:34 浙江'
				}, {
					name: '123456',
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					note: '09-12 00:34 浙江'
				}],
				isPlay: false,
				showPayModal: false,
				watch: false,
				content: '学习内容定时更新，随到随学',
				commentList: [],
				likeList: [],
				classId: ''
			};
		},
		onLoad(options) {
			this.classId = options.id;
			this.pageTitle = options.title;
			this.getInfo(options.id);
			this.getCommentLst();
			this.getLikeList();
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onUnload() {
			uni.offKeyboardHeightChange(); // 组件卸载时移除监听
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.pageTitle, //分享的名称
				path: `/page/fenxiang/detail?id=${this.classId}`,
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.pageTitle,
				path: `/page/fenxiang/detail?id=${this.classId}`,
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		computed: {
			...mapState(['userInfo', 'pubInfoUserInfo'])
		},
		methods: {
			handleTouchStart(e) {
				e.currentTarget.classList.add('active');
			},
			handleTouchEnd(e) {
				e.currentTarget.classList.remove('active');
			},
			// 新增长按处理
			handleLongPress(message) {
				if (message.canDelete == '0' || message.canDelete == null) {
					return;
				}
				const isChild = message.parentId != '0'; // 判断是否是回复
				const action = isChild ? '删除这条回复' : '删除这条评论';
				uni.showModal({
					title: '删除确认',
					content: `确定要${action}吗？`,
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							});
							try {
								// 根据类型调用不同接口
								const apiUrl = this.$api.handleDeleteComment;
								const res = await this.$https.post(apiUrl, {
									id: message.id
								});
								if (res.code === 200) {
									// 更新本地数据
									if (isChild) {
										// 删除回复
										this.commentList.forEach((parent) => {
											parent.children = parent.children.filter((child) => child
												.id !== message.id);
										});
									} else {
										// 删除主评论
										this.commentList = this.commentList.filter((item) => item.id !==
											message.id);
									}
									// 更新总数
									uni.showToast({
										title: `删除成功`
									});
									this.getInfo(this.classId);
								}
							} catch (e) {
								console.error('删除失败:', e);
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							} finally {
								uni.hideLoading();
							}
						}
					}
				});
			},
			//查看商家
			lookMarket(id) {
				uni.navigateTo({
					url: '/page/market/index?id=' + id
				});
			},
			//浏览
			liulan() {
				const data = {
					pubInfoId: this.classId,
					operateType: '2'
				};
				this.$https.post(this.$api.viewCountAdd, data).then((res) => {
					if (res.code === 200) {
						console.log('浏览成功');
						this.classInfo.viewCount = this.classInfo.viewCount + 1;
					} else {
						console.log('浏览失败');
					}
				});
			},
			//增加分享次数
			handShareCountAdd() {
				this.$https.post(this.$api.getShareCountAdd, {
					courseDetailId: this.classId
				}).then((res) => {
					if (res.code === 200) {
						this.classInfo.shareCount++;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//展开收起评论
			handleExpand(item, index) {
				if (item.expanded) {
					this.commentList[index].expanded = false;
				} else {
					this.commentList[index].expanded = true;
				}
			},
			// 输入框失去焦点处理
			onInputBlur() {
				setTimeout(() => {
					// 延迟确保键盘完全收起
					if (!this.conmment && this.keyboardHeight === 0) {
						this.conmment = '';
						this.commentName = '';
					}
				}, 300);
			},
			//报名
			handleBaoming() {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				uni.navigateTo({
					url: `/page/fenxiang/baoming?id=${this.classId}&title=${this.pageTitle}`
				});
			},
			//点赞
			handleLike() {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: this.classId,
					operateType: 3,
					processType: this.classInfo.likeFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						this.getInfo(this.classId);
						this.getLikeList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//判断是不是会员
			getVip() {
				this.$https.get(this.$api.getInfo).then((res) => {
					if (res.code === 200) {
						if (res.data.pubInfoUserInfo.vipType == 0) {
							this.showPayModal = true;
						} else {
							this.showPayModal = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取信息
			getInfo(id) {
				this.$https.post(this.$api.getClassDetail, {
					id: id
				}).then((res) => {
					if (res.code === 200) {
						console.log(res);
						this.classInfo = res.data;
						this.tabList = ['介绍', '评论' + '(' + res.data.commentCount + ')', '点赞' + '(' + res.data
							.likeCount + ')'
						];
						this.liulan();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			sectionChange(index) {
				this.curNow = index;
			},
			handleCancel() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			//获取评论
			getCommentLst() {
				this.commentList = [];
				this.$https.post(this.$api.getCourseDetailComment, {
					courseDetailId: this.classId,
					pageNum: 1,
					pageSize: 100
				}).then((res) => {
					if (res.code === 200) {
						console.log(res, 666);
						res.data.forEach((item) => {
							item.expanded = false;
							this.commentList.push(item);
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞列表
			getLikeList() {
				this.$https.post(this.$api.getCourseLikeList, {
					id: this.classId
				}).then((res) => {
					if (res.code === 200) {
						this.likeList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//发生评论
			handleSend() {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				if (!this.conmment) {
					return uni.showToast({
						title: '请输入评论消息',
						icon: 'none'
					});
				}
				this.$https.post(this.$api.getAddComment, {
					parentId: this.commentName ? this.conmmentId : '',
					commentInfo: this.conmment,
					courseDetailId: this.classInfo.id
				}).then((res) => {
					if (res.code === 200) {
						console.log(res, 666);
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						});
						this.conmment = '';
						this.commentName = '';
						this.getCommentLst();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//谈起对话框
			handleReply(item) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				this.inputFocus = false; // 先重置状态
				this.commentName = item.briefUserInfo.nickName;
				this.conmmentId = item.id;
				this.$nextTick(() => {
					this.inputFocus = true;
					// uni.pageScrollTo({ scrollTop: 99999, duration: 300 }); // 滚动到底部
				});
			},
			// 点击自定义播放按钮
			onCustomPlay() {
				if (!this.hasPaid) {
					// 显示支付弹框
					this.showPayModal = true;
				} else {
					// 已支付，直接播放视频
					this.playVideo();
				}
			},
			// 支付确认
			onPayConfirm() {
				uni.navigateTo({
					url: `/page/kaitonghuiyuan/index`
				});
				// 模拟支付逻辑
				// this.showPayModal = false;
				// this.hasPaid = true;
				// this.watch = true;
				// // 支付完成后自动播放视频
				// this.playVideo();
			},
			// 支付取消
			onPayCancel() {
				this.showPayModal = false;
			},
			// 控制视频播放
			playVideo() {
				const video = this.$refs.myVideo;
				if (video) {
					video.play();
				}
			},
			// 视频播放事件回调（可选）
			onVideoPlay() {
				console.log('视频开始播放');
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		height: 100%;
		width: 100%;

		.my_container_body {
			width: 750rpx;
			background: linear-gradient(180deg, #ddffde 0%, #ffffff 29%, #ffffff 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			height: 100%;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				height: calc(100% - 176rpx);
				margin-left: 32rpx;

				.foot-btn {
					width: 686rpx;
					height: 92rpx;
					line-height: 92rpx;
					background: #1ee825;
					border-radius: 100rpx 100rpx 100rpx 100rpx;
					color: #fff;
					text-align: center;
					margin-top: 20rpx;
				}

				.videoShow1 {
					padding-top: 20rpx;
				}

				.videoShow {
					width: 686rpx;
					height: 380rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}

				.t-wrap {
					text-align: center;

					.t-middle {
						margin-top: 30rpx;
						height: 116rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 36rpx;
						color: #ff4400;
						line-height: 58rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}

				.b-middle {
					margin-top: 10rpx;
					text-align: center;
					font-size: 24rpx;
					text-decoration: underline;
				}

				.custom-play-button {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 10;
					background-color: rgba(0, 0, 0, 0.5);
					color: #fff;
					padding: 10px 20px;
					border-radius: 5px;
					cursor: pointer;
				}

				.pay-modal {
					position: fixed;
					top: 25%;
					left: 50%;
					transform: translate(-50%, -50%);
					background-color: #fff;
					padding: 20px;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
					z-index: 20;
				}

				.pay-modal .buttons {
					display: flex;
					justify-content: space-between;
					margin-top: 10px;
				}

				.videoShowitem {
					height: 38rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 24rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					height: 38rpx;
					line-height: 38rpx;

					.time-wrap {
						width: 200rpx;
						display: flex;

						.t-time {
							font-size: 22rpx;
						}
					}

					image {
						width: 38rpx;
						height: 38rpx;
					}

					.like-wrap {
						display: flex;
					}
				}

				.check_tiem {
					width: 686rpx;
					margin-top: 34rpx;
				}

				.fotter {
					height: calc(100% - 590rpx);

					.jieshao {
						height: 100%;

						.j-img {
							height: 100%;
							margin-top: 20rpx;

							.img-wrap {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
							}

							image {
								width: 100%;
								margin-bottom: 20rpx;
								// border-radius: 20rpx;
							}
						}
					}

					.pinlun {
						height: 100%;

						.pinlun-wrap {
							height: 100%;
							// height: calc(100% - 140rpx);
							padding-bottom: 160rpx;
						}

						.p-wrap {
							margin-top: 40rpx;
							display: flex;

							.p-cover {
								width: 60rpx;
								height: 60rpx;

								image {
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
								}
							}

							.p-right {
								margin-left: 6rpx;
								flex: 1;

								.content-item {
									/* 默认样式 */
									background-color: transparent;
									transition: background-color 0.3s;

									/* 添加过渡效果使变化更平滑 */
									&:active {
										/* 长按或按住时的样式 */
										background-color: #dddddd;
										/* 设置为想要的背景颜色 */
									}
								}

								.p-name {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 600;
									font-size: 28rpx;
									color: #333333;
									font-style: normal;
									text-transform: none;
								}

								.p-time {
									margin: 6rpx 0;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-size: 20rpx;
									color: #777777;
								}

								.p-content {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 26rpx;
									color: #333333;
									margin-bottom: 16rpx;
								}

								.p-foot {
									display: flex;
									justify-content: space-between;

									.p-data {
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #777777;
									}

									.p-address {
										margin-left: 14rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #777777;
									}

									.p-btn {
										justify-content: flex-end;
										width: 50rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #19e820;
									}
								}

								.child-content {
									margin-top: 10rpx;
									/* 默认样式 */
									background-color: transparent;
									transition: background-color 0.3s;

									/* 添加过渡效果使变化更平滑 */
									&:active {
										/* 长按或按住时的样式 */
										background-color: #dddddd;
										/* 设置为想要的背景颜色 */
									}

									.c-head {
										display: flex;

										.c-cover {
											width: 40rpx;
											height: 40rpx;

											image {
												width: 100%;
												height: 100%;
												border-radius: 50%;
											}
										}

										.c-name {
											margin-left: 10rpx;
											font-size: 24rpx;
											color: #616161;

											text {
												margin-left: 6rpx;
												color: #999;
											}
										}
									}

									.c-content {
										margin-top: 6rpx;
										font-size: 28rpx;
									}

									.c-foot {
										font-size: 24rpx;
										color: #616161;
									}
								}

								.expand-btn {
									padding: 10rpx 0;
									font-size: 22rpx;
									color: #75767a;
								}
							}
						}

						.p-input {
							background-color: #fff;
							bottom: 0rpx;
							padding-bottom: 50rpx;
							position: fixed;
							display: flex;

							::v-deep .u-input {
								width: 512rpx;
							}

							button {
								font-size: 30rpx;
								margin-left: 20rpx;
								width: 148rpx;
								height: 80rpx;
								background: #1ee825;
								border-radius: 112rpx 112rpx 112rpx 112rpx;
							}
						}
					}

					.dianzan {
						height: 100%;

						.dianzan-wrap {
							height: 100%;
						}

						.p-wrap {
							margin-top: 40rpx;
							display: flex;

							.p-cover {
								width: 60rpx;
								height: 60rpx;

								image {
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
								}
							}

							.p-right {
								margin-left: 6rpx;
								flex: 1;

								.p-name {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 600;
									font-size: 28rpx;
									color: #333333;
									font-style: normal;
									text-transform: none;
								}

								.p-time {
									margin: 6rpx 0;
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-size: 20rpx;
									color: #777777;
								}

								.p-content {
									font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
									font-weight: 400;
									font-size: 26rpx;
									color: #333333;
									margin-bottom: 16rpx;
								}

								.p-foot {
									display: flex;
									justify-content: space-between;

									.p-data {
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #777777;
									}

									.p-address {
										margin-left: 14rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #777777;
									}

									.p-btn {
										justify-content: flex-end;
										width: 50rpx;
										font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
										font-weight: 400;
										font-size: 24rpx;
										color: #19e820;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.custom-share-view {
		position: relative;
		// width: 100rpx;
		display: flex;
		height: 80rpx;
	}

	::v-deep .hidden-share-btn {
		position: absolute;
		top: 0;
		left: 0;
		width: 60rpx;
		height: 60rpx;
		opacity: 0;
		z-index: 2;
	}
</style>